<template>
	<KPYXCY v-bind="$attrs" :data="state.data?.data" :result="state.answer" @answer="answer" v-if="categoryItem.topicComponent === 'KPYXCY'" />
	<PYXCY v-bind="$attrs" :data="state.data?.data" :result="state.answer" @answer="answer" v-if="categoryItem.topicComponent === 'PYXCY'" />
	<XZQDY v-bind="$attrs" :data="state.data?.data" :result="state.answer" @answer="answer" v-if="categoryItem.topicComponent === 'XZQDY'" />
	<BQDY ref="BQDY_REF" v-bind="$attrs" single :data="state.data?.data" :result="state.answer" @answer="answer" v-if="categoryItem.topicComponent === 'BQDY'" />
	<XJZZC v-bind="$attrs" :data="state.data?.data" :result="state.answer" @answer="answer" v-if="categoryItem.topicComponent === 'XJZZC'" />
	<BQCY v-bind="$attrs" :data="state.data?.data" :result="state.answer" @answer="answer" v-if="categoryItem.topicComponent === 'BQCY'" />
	<ZC v-bind="$attrs" :data="state.data?.data" :result="state.answer" @answer="answer" v-if="categoryItem.topicComponent === 'ZC'" />
	<XJZXPY ref="XJZXPY_REF" v-bind="$attrs" :data="state.data?.data" :result="state.answer" @answer="answer" v-if="categoryItem.topicComponent === 'XJZXPY'" />
	<FYCJYC v-bind="$attrs" :data="state.data?.data" :result="state.answer" @answer="answer" v-if="categoryItem.topicComponent === 'FYCJYC'" />
	<KTSH ref="KTSH_REF" v-bind="$attrs" :data="state.data" :result="state.answer" v-if="categoryItem.topicComponent === 'KTSH'" @answer="answer" />
	<LYL v-bind="$attrs" :data="state.data" :result="state.answer" v-if="categoryItem.topicComponent === 'LYL'" @answer="answer" />
	<IMAGE ref="IMAGE_REF" v-bind="$attrs" :data="state.data" :result="state.answer" v-if="categoryItem.topicComponent === 'IMAGE'" @answer="answer" />
	<FORMULA :data="topicData" v-if="categoryItem.type === 'formula'" />
</template>

<script setup>
import { onBeforeMount, reactive, ref, computed, nextTick } from 'vue';
// api
import { topicDetailed, getTopicAnswer  } from "@/api"
// 组件
import KPYXCY from "./KPYXCY/index.vue"
import PYXCY from "./PYXCY/index.vue"
import XZQDY from "./XZQDY/index.vue"
import BQDY from "./BQDY/index.vue"
import XJZZC from "./XJZZC/index.vue"
import BQCY from "./BQCY/index.vue"
import ZC from "./ZC/index.vue"
import XJZXPY from "./XJZXPY/index.vue"
import FYCJYC from "./FYCJYC/index.vue"
import KTSH from "./KTSH/index.vue"
import LYL from "./LYL/index.vue"
import IMAGE from "./IMAGE/index.vue"
import FORMULA from "./FORMULA/index.vue"
import { useDict } from "@/dict/index.js"
import { useTopicCreate } from "@/hooks"
const props = defineProps({
	value: {
		type: [String, Array, Object],
		default: ''
	},
	id: {
		type: [String, Number],
		default: ''
	},
	userId: {
		type: String,
		default: ''
	},
	showResult: Boolean,
	topicData: {
		type: [Object, Array],
		default: () => ({})
	},
	categoryId: {
		type: Number,
		default: 0
	},
	categoryItem: {
		type: Object,
		default: () => ({})
	},
	getResult: Function
})
const emit = defineEmits(['update:value'])
// 字典
const { useDictList, useDictItem } = useDict()
const { useFormatCreateData } = useTopicCreate()
const id = computed(() => props?.topicData?.id)
const state = reactive({
	data: {},
	answer: [],
})
const XJZXPY_REF = ref(null)
const BQDY_REF = ref(null)
const IMAGE_REF = ref(null)
const KTSH_REF = ref(null)
const componentRef = reactive({
	'XJZXPY': XJZXPY_REF,
	'BQDY': BQDY_REF,
})
const getDetailed = async () => {
	await nextTick()
	let answer = {}
	if(props.showResult) {
		answer = await getTopicAnswer({topic_id: id.value})
		state.answer = Array.isArray(answer.content) ? [] : JSON.parse(answer.content.answer)
	}
	// 更新结果 
	state.data = useFormatCreateData(props.topicData, props.categoryItem.topicComponent)
	// 返回结果
	setTimeout(() => {
		if(IMAGE_REF.value || KTSH_REF.value) {
			IMAGE_REF.value && IMAGE_REF.value.getImageFile().then(() => {
				props?.getResult(answer.content)
			})
			KTSH_REF.value && KTSH_REF.value.getImageFile().then(() => {
				props?.getResult(answer.content)
			})
		}else{
			props?.getResult(answer?.content || null)
		}
	})
}

// 返回结果
const answer = (value) => emit('update:value', value)

const useSelectItem = (name) => componentRef[name]?.useSelectItem()
const useNextItem = (name) => { componentRef[name]?.useGetNextId() }
const useChange = (name, value) => { componentRef[name]?.useChange(value) }
const useBack = (name, value) => { componentRef[name]?.useBack(value) }
const useRewrite = (name, value) => { componentRef[name]?.useRewrite(value) }
onBeforeMount(() => {
	props.categoryId === 8 && getDetailed()
})
defineExpose({ useSelectItem, useNextItem, useChange, useBack, useRewrite })
</script>